<!--
 * @Description: What's this for
 * @Autor: WangYuan1
 * @Date: 2022-08-12 10:51:29
 * @LastEditors: WangYuan
 * @LastEditTime: 2022-08-12 11:14:58
-->
<template>
  <div class="layout">
    <el-dialog title="选择首页应用排版" :visible.sync="show" width="35%">
      <div class="layout-list">
        <div class="layout-item">
          <img src="@/assets/layout1.png" />
          <el-radio v-model="value" label="1">布局一</el-radio>
        </div>
        <div class="layout-item">
          <img src="@/assets/layout2.png" />
          <el-radio v-model="value" label="2">布局二</el-radio>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="setLayout">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      show: false,
      type: "APPLICATION_LAYOUT",
      value: "",
    };
  },
  methods: {
    open() {
      this.show = true;
      this.getLayout();
    },
    getLayout() {
      this.$POST("one-travel-api/property/getValue", {
        id: this.type,
      }).then((res) => {
        this.value = res.data || "1";
      });
    },
    setLayout() {
      this.$POST("one-travel-api/property/setValue", {
        k: this.type,
        v: this.value,
      }).then((res) => {
        if (res.errorCode == "00000")
          this.$message({
            message: "布局设置成功！",
            type: "success",
          });
        this.show = false;
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.layout {
  .layout-list {
    display: flex;
    justify-content: space-around;

    .layout-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      img {
        position: relative;
        width: 300px;
      }
    }
  }
}
</style>